본문으로 건너뛰기

JSX 소개와 React 컴포넌트 표현

React는 사용자 인터페이스를 구축하기 위한 자바스크립트 라이브러리입니다. React의 핵심 개념 중 하나는 JSX입니다. 이번 섹션에서는 JSX가 무엇인지, 그리고 JSX를 사용하여 어떻게 React 컴포넌트를 표현할 수 있는지 알아보겠습니다.

JSX란 무엇인가?​

JSX는 자바스크립트 XML의 약자입니다. XML은 HTML과 유사한 마크업 언어로, JSX를 사용하면 HTML처럼 보이는 구문을 자바스크립트 코드 안에 작성할 수 있습니다. JSX는 브라우저가 이해할 수 있도록 React에서 자바스크립트로 변환됩니다.

const element = <h1>Hello, world!</h1>;

위의 코드는 JSX를 사용하여 h1 요소를 만들었습니다. JSX는 친숙한 HTML 형태로 작성되지만, 이 코드는 실제로는 자바스크립트 객체로 변환됩니다.

React 컴포넌트란?​

React 컴포넌트는 UI를 구성하는 독립적이고 재사용 가능한 코드 조각입니다. 컴포넌트는 함수형과 클래스형 두 가지로 나뉘지만, 여기서는 주로 함수형 컴포넌트를 사용합니다.

함수형 컴포넌트​

함수형 컴포넌트는 자바스크립트 함수를 사용하여 정의됩니다. 함수형 컴포넌트는 간단하며, 상태와 생명주기 기능을 포함하지 않은 컴포넌트를 정의할 때 유용합니다.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

위의 코드는 Welcome이라는 함수형 컴포넌트를 정의한 것입니다. 이 컴포넌트는 props라는 객체를 인수로 받아서 name이라는 속성을 사용하여 인사말을 표시합니다.

JSX를 사용한 컴포넌트 표현​

JSX를 사용하면 React 컴포넌트를 더 쉽게 작성하고 읽을 수 있습니다. 예를 들어, 여러 개의 컴포넌트를 조합하여 더 복잡한 UI를 만들 수 있습니다.

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

위의 코드는 App이라는 컴포넌트를 정의하고, Welcome 컴포넌트를 세 번 사용하여 각기 다른 이름으로 인사말을 표시합니다.

주의할 점​

  • JSX 문법: JSX에서는 자바스크립트 표현식을 중괄호 {}로 감싸서 사용할 수 있습니다.
  • 태그 닫기: JSX는 XML과 유사하기 때문에 모든 태그는 반드시 닫혀야 합니다. 예를 들어 <img />처럼 자체 닫기 태그를 사용하거나 <div></div>처럼 명시적으로 닫아야 합니다.
  • 단일 루트 요소: JSX에서 컴포넌트는 단일 루트 요소를 반환해야 합니다. 여러 요소를 반환하려면 <div>나 <>(Fragment)를 사용해야 합니다.

더 알아보기​

내용 요약과 다음 주제​

이번 섹션에서는 JSX와 React 컴포넌트의 기본 개념에 대해 설명했습니다. JSX는 HTML과 유사한 구문을 자바스크립트 코드에 작성할 수 있게 해주며, React 컴포넌트는 UI를 구성하는 독립적이고 재사용 가능한 코드 조각입니다. 다음 주제는 클래스형이 아닌 함수형 컴포넌트를 사용해야 하는 이유에 대해 다룰 예정입니다.